{% load static %}
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<link href="{% static 'component/layui/css/layui.css' %}" rel="stylesheet" />
	<link href="{% static 'admin/css/pearCommon.css' %}" rel="stylesheet" />
</head>

<body>

	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-input-inline">
							<input type="text" name="search" placeholder="查询物料.." class="layui-input">
						</div>
						<div class="layui-input-inline">
							<select name="category_id" lay-verify="required" lay-filter="role">
                                <option value="0">全部</option>
                                {% for cg in categories %}
                                <option value="{{cg.id}}">{{ cg.name }}</option>
                                {% endfor %}
                            </select>
						</div>
						<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
							<i class="layui-icon layui-icon-search"></i>
							查询
						</button>
						<button type="reset" class="pear-btn pear-btn-md">
							<i class="layui-icon layui-icon-refresh"></i>
							重置
						</button>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="user-table" lay-filter="user-table"></table>
			</div>
		</div>
	</body>

	<script type="text/html" id="user-toolbar">
		<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
			<i class="layui-icon layui-icon-add-1"></i>
			新增物料
		</button>
	</script>

	<script type="text/html" id="user-bar">
		<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
		<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
	</script>

	<script src="{% static 'component/layui/layui.js' %}"></script>
	<script src="{% static 'component/my.js' %}"></script>
	<script>
		layui.use(['table', 'form', 'jquery'], function () {
			let table = layui.table;
			let form = layui.form;
			let $ = layui.jquery;

			let cols = [
				[
					{ title: '序号', field: 'No', align: 'center' },
					{ title: '名称', field: 'name', align: 'center' },
					{ title: '数量', field: 'number', align: 'center' },
					{ title: '分类', field: 'category', align: 'center' },
					{ title: '备注', field: 'remark', align: 'center' },
					{ title: '创建时间', field: 'create_time', align: 'center' },
					{ title: '操作', toolbar: '#user-bar', align: 'center', width: 130 }
				]
			]

			table.render({
				elem: '#user-table',
				url: "{% url 'supply:supply_list' %}",
				page: true,
				cols: cols,
				skin: 'line',
				limit: 10,
				limits: [10, 20, 30],
				toolbar: '#user-toolbar',
				defaultToolbar: [{
					title: '刷新',
					layEvent: 'refresh',
					icon: 'layui-icon-refresh',
				}, 'filter', 'print', 'exports'],
				parseData: function (res) { 	//res 即为原始返回的数据
					console.log(res)
					return {
						"code": res.status, 	//解析接口状态
						"msg": res.msg, 		//解析提示文本
						"count": res.data_count, 	//解析数据长度
						"data": res.data 		//解析数据列表
					};
				},
			});

			table.on('tool(user-table)', function (obj) {
				if (obj.event === 'remove') {
					window.remove(obj);
				} else if (obj.event === 'edit') {
					window.edit(obj);
				}
			});

			table.on('toolbar(user-table)', function (obj) {
				if (obj.event === 'add') {
					window.add();
				} else if (obj.event === 'refresh') {
					window.refresh();
				}
			});

			form.on('submit(user-query)', function (data) {
				table.reload('user-table', { where: data.field })
				return false;
			});

			window.add = function () {
				layer.open({
					type: 2,
					title: '新增',
					shade: 0.1,
					area: ['500px', '400px'],
					content: "{% url 'supply:supply_add' %}"
				});
			}

			window.edit = function (obj) {
				let url = "{% url 'supply:supply_edit' 'sp_id' %}"
				url = url.replace("sp_id", obj.data['id'])
				layer.open({
					type: 2,
					title: '修改',
					shade: 0.1,
					area: ['500px', '400px'],
					content: url
				});
			}

			window.remove = function (obj) {
				layer.confirm('确定要删除该物料？', { icon: 3, title: '提示' }, function (index) {
					layer.close(index);
					let loading = layer.load();
					let url = "{% url 'supply:supply_del' 'sp_id' %}"
					url = url.replace("sp_id", obj.data["id"])
					$.ajax({
						url: url,
						dataType: 'json',
						type: 'delete',
						headers: {
							"X-CSRFToken": getCookie("csrftoken")
						},
						success: function (result) {
							layer.close(loading);
							if (result.status == 1) {
								layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
									// obj.del();
									table.reload("user-table");
								});
							} else {
								layer.msg(result.msg, { icon: 2, time: 1000 });
							}
						}
					})
				});
			}

			window.refresh = function (param) {
				table.reload('user-table');
			}
		})
	</script>
</body>

</html>